<template>
  <right-template :title="componentData.title" :tabName="componentData.tabName">
    <el-form class="right-dropdown margin-top-10" >
      <switch-normal v-model="commonAttr.isDefaultSelected" label="默认选中" @change="onChangeAttr"></switch-normal>
      <!-- <switch-normal v-model="commonAttr.isMenu" label="下拉菜单" @change="onChangeAttr"></switch-normal> -->
      <input-normal label="导出表头" v-model="commonAttr.tableName" @change="onChangeAttr"></input-normal>
      <input-normal label="标题" v-model="commonAttr.title" @change="onChangeAttr"></input-normal>
      <input-normal label="占位提示" v-model="commonAttr.placeholder" @change="onChangeAttr"></input-normal>
      <dropdown-normal v-model="commonAttr.placeholerColor" label="提示文本颜色" :valLists="PLACEHOLDER_COLOR_TYPE"  @change="onChangeAttr"></dropdown-normal>
      
      <slider-normal v-model="commonAttr.fontSize" label="字号" :max="100" :step="1" @change="onChangeAttr"></slider-normal>
      <color-normal v-model="commonAttr.color" label="字体颜色" format="rgb" @change="onChangeAttr"></color-normal>
      <slider-normal v-model="commonAttr.lineHeight" label="行高" :max="10" :step="0.1" @change="onChangeAttr"></slider-normal>
      <slider-normal v-model="commonAttr.letterSpacing" label="字距" :max="20" :step="1" @change="onChangeAttr"></slider-normal>
      <switch-normal v-model="commonAttr.isCustomData" label="自定义列表数据" @change="onChangeAttr"></switch-normal>
      <textarea-normal v-if="commonAttr.isCustomData" placeholder="自定义列表数据" v-model="commonAttr.customData" @change="onChangeAttr"></textarea-normal>
      <input-normal v-if="commonAttr.isCustomData" label="第一个显示键值" v-model="commonAttr.customDataFirstKey" @change="onChangeAttr"></input-normal>

      <el-divider content-position="center">选项设置</el-divider>
      <p class="margin-bottom-10 margin-left-8">选项内容</p>
      <el-button type="primary" @click.stop="onAddItem" class="margin-top-10 margin-left-8">
        <el-icon><i class="jy-icon-plus"></i></el-icon>添加选项
      </el-button>
      <el-collapse v-model="activeNames" class="drag-list">
        <div v-for="(item, index) in lists" :key="'drag_'+index" class="item">
          <input-normal v-model="item.text" :label="'选项' + (index+1)" class="input" @change="onUpdateItem(index)"></input-normal>
          <i class="jy-icon-close" @click.stop="onDeleteItem(index)"></i>
        </div>
      </el-collapse>
      <el-divider content-position="center">功能设置</el-divider>
      <switch-normal v-model="commonAttr.need" label="设为必选项" @change="onChangeAttr"></switch-normal>
    </el-form>
  </right-template>
</template>

<script setup lang="ts">
import { useWebComponentStore } from '@/store/web/component'
import { COMPONENT_TYPES, PLACEHOLDER_COLOR_TYPE } from '@/const/'
import { ROTATE3D_LIST } from '@/const/web/'
import { ComponentTypesDefaultDom } from '@/store/models/component-default-data'

const useWebComponent = useWebComponentStore()
let componentData_: any
const componentData = computed(() => {
  componentData_ = useWebComponent.currentComponentData
  return componentData_
})
let commonAttr_: any
const commonAttr = computed(() => {
  commonAttr_ = useWebComponent.currentComponentData!.commonAttr
  return commonAttr_
})
const onChangeAttr = () => {
  // useWebComponent.updateCurrentComponentData({ commonAttr: commonAttr_ })
}
const pattern = computed(() => {
  if(useWebComponent.currentComponentData!.cid == COMPONENT_TYPES.wb_radio) {
    return true
  } else {
    return false
  }
})

const activeNames = [1]
const lists = computed(() => {
  return useWebComponent.currentComponentData!.lists
})
const onAddItem = () => {
  let item: IListItem
  if(componentData_.events.rotate3d) {
    item = _.cloneDeep(ROTATE3D_LIST[0])
  } else {
    item = _.cloneDeep(ComponentTypesDefaultDom[componentData_.cid].lists[0])
  }
  if(componentData_.lists && componentData_.lists[0]) {
    item = _.cloneDeep(componentData_.lists[0])
  }
  if(item){
    useWebComponent.addComponentItem(item)
  }
}
const onUpdateItem = (index: number) => {
  useWebComponent.updateComponentItem({ index, item: componentData_.lists[index] })
}
const onDeleteItem = (index: number) => {
  useWebComponent.deleteComponentItem({index})
}
</script>